<template>
  <div class="page-cont">
    <van-nav-bar
      title="添加移动记录"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="list">
      <action-select
        v-model="form.beltlineName"
        title="生产线"
        :list="preData.line"
        label="lineName"
        value="lineName"
      />
      <action-select
        v-model="form.pedestalNum"
        title="台座编号"
        :list="carByLines"
        :disabled="!form.beltlineName"
        label="pedestalNum"
        value="pedestalNum"
      />
      <div class="b" />
      <action-select
        v-model="form.procedureName"
        title="当前工序"
        :list="preData.procedure"
        label="procedureName"
        value="procedureName"
      />
    </div>
    <div class="btn">
      <van-button
        type="info"
        block
        @click="submit"
      >
        提交
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "CarTrackPage",
  data() {
    return {
      carList: [],
      form: {
        procedureName: "",
        beltlineName: "",
        pedestalNum: "",
        pedestalId: "",
        fieldId: "3fc4473a76f96ab2fe81dd98089f8db7",
      },
    };
  },
  watch: {
    "form.pedestalNum"() {
      if (this.form.pedestalNum) {
        let pedesta = this.carList.find((item) => item.pedestalNum === this.form.pedestalNum);
        this.form.pedestalId = pedesta.id;
      }
    },
    "form.beltlineName"() {
      this.$nextTick(() => {
        this.$set(this.form, 'pedestalNum', this.carByLines[0] ? this.carByLines[0].pedestalNum : '')
      })
    },
  },
  computed: {
    carByLines() {
      return this.carList.filter((item) => {
        return item.beltlineName === this.form.beltlineName;
      });
    }
  },
  created() {
    this.getCarList();
  },
  methods: {
    async getCarList() {
      this.$toast.loading({ message: "正在登陆...", forbidClick: true });
      let data = await this.api.GET_CAR_LIST({ pageNo: 1, pageSize: 100000 });
      this.carList.push(...data.list);
      console.log(data.list)
      this.$toast.clear();
    },
    async submit() {
      // 判断
      if (!this.form.beltlineName) return this.$toast.fail("请选择生产线");
      if (!this.form.pedestalNum) return this.$toast.fail("请选择台座编号");
      if (!this.form.procedureName) return this.$toast.fail("请选择当前工序");
      this.form.fieldId = this.$store.state.user.userInfo.unitId
      
      this.$toast.loading({message: "加载中...", forbidClick: true});
      await this.api.CREATE_CAR_TRACK(this.form);
      this.$toast.clear();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
.list {
  flex: 1;
  height: 0;
  overflow: hidden;
  overflow-y: auto;
  background: #f5f5f5;
  .b {
    height: 10px;
  }
}
</style>
